<template>
    <div class="app-container">
        <div class="filter-container">
            <el-input v-model="filterForm.name" clearable :placeholder="$t('filterForm.name')" style="width: 100px;" class="filter-item" />
            <el-button v-waves class="filter-item" type="success" icon="el-icon-search" @click="search" >
                {{ $t('filterForm.search') }}
            </el-button>
            <el-button v-waves :loading="filterExporting" class="filter-item" type="warning" icon="el-icon-download" @click="handleExport" >
                {{ $t('filterForm.export') }}
            </el-button>
        </div>
        <el-table
            ref="tableRef"
            v-loading="tableLoading"
            :data="tableList"
            height="85%"
            border
            stripe
            highlight-current-row
            @row-click="tableRowClick"
            @selection-change="tableSelectionChange"
            style="width: 100%;">
            <el-table-column type="selection" width="40"/>
            <el-table-column type="index" label="#" align="center" width="50">
            </el-table-column>
            <el-table-column label="编号" align="center" prop="number" show-overflow-tooltip width="100">
            </el-table-column>
            <el-table-column label="姓名" align="center" prop="name" show-overflow-tooltip width="100">
            </el-table-column>
            <el-table-column label="职务" align="center" prop="job" show-overflow-tooltip min-width="120">
            </el-table-column>
            <el-table-column label="最喜欢的学科" align="center" prop="mostLikeSubject" show-overflow-tooltip min-width="120">
            </el-table-column>
            <el-table-column label="最喜欢的老师" align="center" prop="mostLikeTeacher" show-overflow-tooltip min-width="120">
            </el-table-column>
            <el-table-column label="最困难的学科" align="center" prop="mostDifficultSubject" show-overflow-tooltip min-width="120">
            </el-table-column>
            <el-table-column label="好友姓名" align="center" prop="friendName" show-overflow-tooltip min-width="120">
            </el-table-column>
            <el-table-column label="好友性别" align="center" prop="friendSex" show-overflow-tooltip min-width="120">
            </el-table-column>
            <el-table-column label="兴趣爱好" align="center" prop="hobbies" show-overflow-tooltip min-width="120">
            </el-table-column>
            <el-table-column label="头像" align="center" width="120">
                <template slot-scope="scope">
                    <el-image
                        style="width: 100px; height: 100px"
                        :src="scope.row.avatarCompressUrl"
                        fit="fill"
                        :preview-src-list="[scope.row.avatarUrl]">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="140" class-name="small-padding fixed-width" fixed="right">
                <template slot-scope="{row}">
                    <el-button type="primary" circle icon="el-icon-search" @click="get(row)" style="margin-left: 0px;"/>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            v-show="tableListTotal>0"
            @size-change="paginationSizeChange"
            @current-change="paginationCurrentChange"
            :current-page="tableListParam.pageNum"
            :page-sizes="[5,10,20,50]"
            :page-size="tableListParam.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableListTotal"
            style="padding: 6px 0;">
        </el-pagination>
    </div>
</template>

<script>
import waves from '@/directive/waves'

import * as TerminalUser from '@/api/terminalUser'

export default {
    name: 'terminalUser',
    directives: {waves},
    data() {
        return {
            filterForm: {
                name: '',
            },
            filterExporting: false,

            tableLoading: true,
            tableList: [],
            tableMultipleSelectionList: [],

            tableListTotal: 0,
            tableListParam: {
                pageNum: 1,
                pageSize: this.Config.pageSize
            },
        }
    },
    created() {
        this.handleSearch()
    },
    methods: {
        search() {
            this.tableListParam.pageNum = 1
            this.handleSearch()
        },
        handleExport() {
            this.filterExporting = true
            import('@/utils/excelUtil').then(excel => {
                const tHeader = ['编号', '姓名', '职务', '最喜欢的学科', '最喜欢的老师', '最困难的学科', '好友姓名', '好友性别', '兴趣爱好']
                const filterVal = ['number', 'name', 'job', 'mostLikeSubject', 'mostLikeTeacher', 'mostDifficultSubject', 'friendName', 'friendSex', 'hobbies']
                const data = this.tableList.map(v => filterVal.map(j => {
                    if (j === 'enable') {
                        if (v[j]) {
                            return '激活'
                        } else {
                            return '锁定'
                        }
                    } else {
                        return v[j]
                    }
                }))
                excel.export_json_to_excel({
                    header: tHeader,
                    data,
                    filename: '终端用户列表'
                })
                this.filterExporting = false
            })
        },

        tableRowClick(row) {
        },
        tableSelectionChange(rows) {
            this.tableMultipleSelectionList = rows
        },
        paginationSizeChange(val) {
            this.tableListParam.pageSize = val
            this.handleSearch()
        },
        paginationCurrentChange(val) {
            this.tableListParam.pageNum = val;
            this.handleSearch()
        },

        handleSearch() {
            this.tableLoading = true
            TerminalUser.searchPage({
                name: this.filterForm.name,
                pageNum: this.tableListParam.pageNum,
                pageSize: this.tableListParam.pageSize,
            }).then(res => {
                this.tableList = res.records
                this.tableListTotal = res.total
                this.tableLoading = false
            }).catch(error => {
                this.tableLoading = false
            })
        },

        get(row){
            this.$router.push({ path: '/terminal/history', query: {faceId: row.number} })
        },
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.avatar-uploader ::v-deep .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader ::v-deep .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
